<!--
 * @Author: ljc
 * @Date: 2023-04-25 15:00:24
 * @LastEditors: g05047
 * @LastEditTime: 2023-05-10 11:33:04
 * @Description: 评审任务列表
-->
<template>
  <div>
    <rk-dialog width="1200"
      height="700"
      :title="title"
      :visible="visible"
      :destroyOnClose="true"
      @close="visible = false"
      :maskClosable="false">
      <rk-container-top-bottom :isFooter="false"
        :isAside="false"
        :isHeader="false">
        <template #main_top>
          <rk-condition>
            <template #condition>
              <rk-condition-bar v-show="true">
                <template #content>
                  <el-form ref="form"
                    :inline="true">
                    <span v-text="`任务名称:${taskName}`"></span>
                  </el-form>
                </template>
                <template #buttons>
                  <el-button type="primary"
                    @click="handleOperation('manual')">按项目手动分配</el-button>
                  <el-button type="primary"
                    @click="handleOperation('automatic')">按专家擅长自动分配</el-button>
                </template>
              </rk-condition-bar>
            </template>
            <template #content>
              <rk-grid ref="assignRef"
                dataUrl="/assignExperts/getAssignProjects"
                boxConfig
                :params="assignQueryParams"
                :columns="getTableColumns()"
                :pagerConfig='false'>
                <template #toolbar_buttons>
                  <RkButtonGroup :options="json_expert_button"
                    v-model="assignQueryParams.type" />
                </template>
                <template #toolbar_tools>
                  <el-input v-model="assignQueryParams.keyWords"
                    placeholder="请输入名称/编码"
                    class="mr-15px w-200px"
                    clearable>
                  </el-input>
                </template>
              </rk-grid>
            </template>
          </rk-condition>
        </template>
        <template #main_bottom>
          <rk-condition>
            <template #content>
              <rk-grid ref="expertRef"
                title="专家列表"
                dataUrl='/assignExperts/getAssignExpertList'
                boxConfig
                :params="expertQueryParams"
                :columns="expertTableColumns"
                :pagerConfig='false'>
                <template #toolbar_title_buttons>
                  <el-input v-model="expertQueryParams.keyWords"
                    placeholder="请输入名称/编码"
                    class="mr-15px w-200px"
                    clearable>
                  </el-input>
                </template>
              </rk-grid>
            </template>
          </rk-condition>
        </template>
      </rk-container-top-bottom>
      <template #footer>
        <el-button type="primary"
          @click="handleConfirm">保存</el-button>
        <el-button @click="hanldeClose">取消</el-button>
      </template>
      <project-manual-expert-dialog ref="projectManualExpertDialogViewRef"></project-manual-expert-dialog>
      <project-automatic-expert-dialog ref="projectAutomaticExpertDialogViewRef"></project-automatic-expert-dialog>
    </rk-dialog>
  </div>
</template>
  <script setup>
import ProjectManualExpertDialog from './ProjectManualExpertDialog.vue'
import ProjectAutomaticExpertDialog from './ProjectAutomaticExpertDialog.vue'
import { json_expert_button } from '@/common/button-data.js'
import { useNamespace } from "element-plus";
import { COMMON_STOP_OPEN_ENUMS } from '@/enums/enums-common.js'
import { ref, watch } from "vue"
const ns = useNamespace("page", ref("rk"));
let form = reactive({
  name: undefined,
  name1: undefined,
  name2: undefined,
  name3: undefined,
})
const taskName = ref('')
const taskId = ref(null)
const projectManualExpertDialogViewRef = ref(null)
const projectAutomaticExpertDialogViewRef = ref(null)
const title = ref('评审任务列表')
const visible = ref(false)
const assignRef = ref(null)
const expertRef = ref(null)
// 查询参数
let assignQueryParams = reactive({
  keyWords: undefined,
  type: 0,
  taskId: undefined
})
// 查询参数
let expertQueryParams = reactive({
  keyWords: undefined,
  taskId: undefined,
  type: 0
})

watch(() => assignQueryParams.type, (newValue) => {
  if (newValue) {
    expertQueryParams.type = newValue
    assignRef.value.searchEvent()
    expertRef.value.searchEvent()
  }
}, { deep: true, immediate: false })
const getTableColumns = () => {
  const tableColumns = [
    { field: 'adName', title: '地区名称', width: 250, align: 'left', },
    { field: 'agName', title: '单位名称', width: 250, align: 'left', },
    { field: 'proCode', title: '项目编码', width: 200, align: 'left', },
    {
      field: 'proName', title: '项目名称', width: 250, align: 'left',
      renderer({ cellValue, row, column }) {
        return '<a  rel="opener" href="/page/debt/project-manage/common/pro-yhs.html?pro_id=' + row.PRO_ID + '" target="_blank">' + cellValue + '</a>';
      }
    },
    { field: 'assignCount', title: '已分配专家数', width: 120, align: 'center', visible: assignQueryParams.type !== '002' },
  ]
  return tableColumns
}
const expertTableColumns = ref([
  { field: 'pszjName', title: '姓名', width: 120, align: 'center', },
  { field: 'sex', title: '姓别', width: 120, align: 'center', },
  { field: 'age', title: '年龄', width: 120, align: 'center', },
  { field: 'resign', title: '职务', width: 120, align: 'center', },
  { field: 'applyNum', title: '参与评审项目数', width: 250, align: 'right', },
  { field: 'phonenumber', title: '手机号', width: 250, align: 'center', },
  { field: 'idCardNo', title: '身份证号', width: 250, align: 'center', },
  { field: 'pszjInfo', title: '简介', width: 250, align: 'left', },
])

/** 打开弹出层 */
const handleOperation = (type) => {
  if (type === 'manual') { // 手动
    projectManualExpertDialogViewRef.value.handleOpen()
  } else if (type === 'automatic') { // 自动
    projectAutomaticExpertDialogViewRef.value.handleOpen()
  }
}

/** 打开弹出层 */
const handleOpen = (id, name) => {
  visible.value = true
  taskId.value = id
  taskName.value = name
  assignQueryParams.taskId = id
  expertQueryParams.taskId = id
}
/** 关闭弹窗 */
const hanldeClose = () => {
  visible.value = false
}

/** 确认提交 */
const handleConfirm = () => {
  visible.value = false
}
// 对外暴露方法
defineExpose({
  handleOpen
})
  </script>
  
  <style lang="scss" scoped>
</style>